<template>
  <div>
    <div class="login-container">
      <div class="login-frame">
        <div class="title">ELOG</div>
        <a-menu v-model="current" mode="horizontal" @select="changeTab">
          <a-menu-item key="login">登录</a-menu-item>
          <a-menu-item key="register">注册</a-menu-item>
        </a-menu>
        <div class="content">
          <login v-if="showLogin" />
          <Register v-else @registerSuccess="registerSuccess" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Login from './login'
import Register from './register'
export default {
  components: {
    Login,
    Register
  },
  data() {
    return {
      current: ['login'],
      showLogin: true
    }
  },
  methods: {
    changeTab(e) {
      const key = e.key
      this.showLogin = key === 'login'
    },
    registerSuccess() {
      this.showLogin = true
    }
  }
}
</script>
<style scoped>
.login-container {
  background-image: url('/login-back.jpg');
  /* 让整个div固定在屏幕的最上方和最左方 */
  position:fixed;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  /* min-width: 1000px; */
  /* 让整个div在HTML页面中各个层级的下方 */
  /* z-index:-10; */
  zoom: 1;
  background-color: #fff;
  background-repeat: no-repeat;
  /* 让图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白 */
  background-size: cover;
  -webkit-background-size: cover;
  -o-background-size: cover;
  /* 图片的位置，居中，靠左对齐 */
  background-position: center 0;
}
.login-frame {
  position: relative;
  width: 450px;
  max-width: 100%;
  /* min-height: 450px; */
  background-color: #fff;
  margin: 0 auto;
  margin-top: 200px;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  padding: 40px 40px 0 40px;
}
.title {
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 15px;
}
.ant-menu-item {
  width: 50%;
  text-align: center;
}
.content {
  margin-top: 20px;
}
</style>
